<template>
    <div class="doctor-side">
        <v-head ref="vHead" />
        <v-side ref="vSide" />
        <div class="content">
            <div :style="{'min-height': scrollerHeight}">
                <router-view></router-view>
            </div>
            <v-foot ref="vFoot"/>
        </div>
    </div>
  </template>
  
  <script>
  import vHead from "./Header.vue";
  import vSide from "./Side.vue";
  import vFoot from "./Footer.vue";
  
  export default {
    components: {
      vHead,
      vSide,
      vFoot
    },
    created() {
    //   this.$store.dispatch("getDictionarys", {});
    },
    mounted() {
      this.scrollerHeight=document.documentElement.scrollHeight-this.$refs.vHead.$el.offsetHeight-66+'px';
    },
    data() {
      return {
        scrollerHeight: "826px"
      };
    }
  };
  </script>

<style lang="scss" scoped>
    .content {
      position: absolute;
      left: 120px;
      right: 0;
      top: 100px;
      bottom: 0;
      width: auto;
      padding: 15px 15px 0;
      box-sizing: border-box;
      overflow-y: scroll;
      background-color: #fafafa;
      min-height: calc(100% - 100px);
    }
    .doctor-side {
      height: 100%;
    }
</style>